<template>
  <div class="home-container">
    <!-- 最新公告 -->
    <div class="announcement">
      <div class="section-header">
        <h2>最新公告</h2>
        <el-button text @click="goToAnnouncement">
          查看更多 <el-icon class="el-icon--right"><ArrowRight /></el-icon>
        </el-button>
      </div>
      <div class="announcement-list">
        <div 
          v-for="(activity, index) in activities" 
          :key="index" 
          class="announcement-item"
          @click="viewAnnouncementDetail(activity)"
        >
          <div class="announcement-dot" :class="'type-' + activity.type"></div>
          <div class="announcement-content">
            <div class="announcement-text">{{ activity.content }}</div>
            <div class="announcement-date">{{ activity.timestamp }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速发布入口 -->
    <div class="quick-publish">
      <div class="publish-grid">
        <div class="publish-item lost" @click="handlePublishLost">
          <div class="content">
            <div class="icon-wrapper">
              <el-icon class="icon"><Warning /></el-icon>
            </div>
            <div class="text">
              <h3>发布失物信息</h3>
              <p>丢失物品？在这里发布寻物启事</p>
            </div>
          </div>
          <div class="hover-effect"></div>
        </div>
        <div class="publish-item found" @click="handlePublishFound">
          <div class="content">
            <div class="icon-wrapper">
              <el-icon class="icon"><Present /></el-icon>
            </div>
            <div class="text">
              <h3>发布招领信息</h3>
              <p>捡到物品？在这里发布招领启事</p>
            </div>
          </div>
          <div class="hover-effect"></div>
        </div>
      </div>
    </div>

    <!-- 信息展示区 -->
    <div class="items-section">
      <div class="section-header">
        <h2>最新信息</h2>
        <el-radio-group v-model="displayType" size="large">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="lost">失物</el-radio-button>
          <el-radio-button label="found">招领</el-radio-button>
        </el-radio-group>
      </div>
      <el-row :gutter="20">
        <el-col
          v-for="item in displayItems"
          :key="item.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
        >
          <el-card
            class="item-card"
            :body-style="{ padding: '0px' }"
            @click="handleItemClick(item)"
          >
            <img :src="getRandomImage(item.id)" class="item-image" />
            <div class="item-content">
              <div class="item-header">
                <img :src="getAvatarImage(item.id)" class="user-avatar" />
                <span class="username">{{ item.username }}</span>
              </div>
              <h3 class="item-title text-ellipsis">{{ item.title }}</h3>
              <p class="item-desc text-ellipsis">{{ item.description }}</p>
              <div class="item-footer">
                <span class="item-time">{{ item.time }}</span>
                <el-tag :type="item.type === 'lost' ? 'danger' : 'success'" size="small">
                  {{ item.type === 'lost' ? '失物' : '招领' }}
                </el-tag>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[12, 24, 36, 48]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { 
  Warning, 
  Present, 
  ArrowRight, 
  Bell, 
  InfoFilled, 
  SuccessFilled, 
  Calendar 
} from '@element-plus/icons-vue'

const router = useRouter()

// 展示类型
const displayType = ref('all')

// 分页相关
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(100)

// 公告数据
const activities = [
  {
    content: '关于加强失物招领信息审核的通知',
    timestamp: '2024-03-15',
    type: 'primary'
  },
  {
    content: '寒假期间失物招领处理办法',
    timestamp: '2024-03-10',
    type: 'info'
  },
  {
    content: '2024年春季学期失物招领工作安排',
    timestamp: '2024-03-01',
    type: 'success'
  }
]

// 模拟数据
const items = [
  {
    id: 1,
    title: 'iPhone 15 Pro',
    description: '在图书馆三楼丢失，深空黑色，有保护壳',
    username: '张同学',
    time: '2024-03-15',
    type: 'lost'
  },
  {
    id: 2,
    title: '学生证',
    description: '在食堂捡到一张学生证，学号2021XXXXXX',
    username: '李同学',
    time: '2024-03-14',
    type: 'found'
  }
  // ... 更多数据
]

// 获取随机图片
const getRandomImage = (id: number) => {
  return `https://picsum.photos/800/400?random=${id}`
}

// 获取头像
const getAvatarImage = (id: number) => {
  return `https://api.dicebear.com/7.x/miniavs/svg?seed=${id}`
}

// 根据类型筛选展示的物品
const displayItems = computed(() => {
  if (displayType.value === 'all') {
    return items
  }
  return items.filter(item => item.type === displayType.value)
})

// 发布相关
const handlePublishLost = () => {
  router.push({ path: '/publish', query: { type: 'lost' } })
}

const handlePublishFound = () => {
  router.push({ path: '/publish', query: { type: 'found' } })
}

// 物品点击
const handleItemClick = (item: any) => {
  router.push(`/detail/${item.id}`)
}

// 分页相关
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // 重新加载数据
}

const goToAnnouncement = () => {
  router.push('/announcement')
}

// 获取公告类型文本
const getAnnouncementTypeText = (type: string) => {
  switch(type) {
    case 'primary': return '重要';
    case 'info': return '通知';
    case 'success': return '一般';
    default: return '通知';
  }
}

// 查看公告详情
const viewAnnouncementDetail = (activity: any) => {
  router.push({
    path: '/announcement-detail',
    query: { id: activities.indexOf(activity) }
  })
}
</script>

<style scoped lang="scss">
.home-container {
  max-width: 1200px;
  min-width: $min-width;
  margin: 0 auto;
  padding: $spacing-huge;
  animation: fadeIn 0.6s ease;
  
  @media (max-width: 768px) {
    padding: $spacing-base;
  }
}

.announcement {
  background: white;
  border-radius: $border-radius-large;
  padding: $spacing-huge;
  margin-bottom: $spacing-huge;
  box-shadow: $card-shadow;

  .section-header {
    @include flex-between;
    margin-bottom: $spacing-large;

    h2 {
      font-size: 24px;
      background: $primary-gradient;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0;
    }
  }

  .announcement-list {
    display: flex;
    flex-direction: column;
    gap: $spacing-base;
  }

  .announcement-item {
    display: flex;
    align-items: center;
    padding: $spacing-base 0;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:hover {
      background-color: #f9f9f9;
      padding-left: $spacing-small;
      
      .announcement-dot {
        transform: scale(1.2);
      }
    }
    
    .announcement-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: $spacing-base;
      transition: transform 0.2s ease;
      
      &.type-primary {
        background: var(--el-color-primary);
      }
      
      &.type-info {
        background: var(--el-color-info);
      }
      
      &.type-success {
        background: var(--el-color-success);
      }
    }
    
    .announcement-content {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .announcement-text {
        font-size: 16px;
        color: $text-primary;
        font-weight: 500;
      }
      
      .announcement-date {
        color: $text-secondary;
        font-size: 14px;
      }
      
      @media (max-width: 768px) {
        flex-direction: column;
        align-items: flex-start;
        gap: $spacing-mini;
        
        .announcement-date {
          font-size: 12px;
        }
      }
    }
  }
}

.quick-publish {
  margin-bottom: $spacing-base;

  .publish-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-base;
  }

  .publish-item {
    position: relative;
    height: 180px;
    border-radius: $border-radius-large;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease;

    &.lost {
      background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
    }

    &.found {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }

    .content {
      position: relative;
      height: 100%;
      padding: $spacing-large;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 2;
    }

    .icon-wrapper {
      width: 64px;
      height: 64px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: $spacing-base;
      transition: transform 0.3s ease;

      .icon {
        font-size: 32px;
        color: white;
      }
    }

    .text {
      text-align: center;
      color: white;

      h3 {
        font-size: 20px;
        margin: 0 0 $spacing-mini;
        font-weight: 600;
      }

      p {
        font-size: 14px;
        margin: 0;
        opacity: 0.9;
      }
    }

    .hover-effect {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 1;
    }

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.15);

      .icon-wrapper {
        transform: scale(1.1);
      }

      .hover-effect {
        opacity: 1;
      }
    }
  }
}

.items-section {
  .section-header {
    background: white;
    border-radius: $border-radius-large;
    padding: $spacing-large $spacing-huge;
    margin-bottom: $spacing-huge;
    @include flex-between;
    box-shadow: $card-shadow;

    h2 {
      font-size: 24px;
      background: $primary-gradient;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin: 0;
    }
  }

  .item-card {
    border: none;
    border-radius: $border-radius-large;
    overflow: hidden;
    transition: $transition-smooth;
    margin-bottom: $spacing-huge;
    box-shadow: $card-shadow;

    &:hover {
      transform: translateY(-5px);
      box-shadow: $hover-shadow;

      .item-image {
        transform: scale(1.05);
      }
    }

    .item-image {
      width: 100%;
      height: 200px;
      object-fit: cover;
      transition: $transition-base;
    }

    .item-content {
      padding: $spacing-large;
      background: white;

      .item-header {
        display: flex;
        align-items: center;
        gap: $spacing-base;
        margin-bottom: $spacing-base;

        .user-avatar {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          border: 2px solid white;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .username {
          color: $text-regular;
          font-size: 14px;
        }
      }

      .item-title {
        font-size: 18px;
        font-weight: 600;
        color: $text-primary;
        margin: 0 0 $spacing-small;
        @include text-overflow;
      }

      .item-desc {
        color: $text-secondary;
        margin: 0 0 $spacing-base;
        height: 40px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .item-footer {
        @include flex-between;
        margin-top: $spacing-base;

        .item-time {
          color: $text-secondary;
          font-size: 14px;
        }
      }
    }
  }
}

.pagination-container {
  background: white;
  border-radius: $border-radius-large;
  padding: $spacing-large;
  margin-top: $spacing-huge;
  @include flex-center;
  box-shadow: $card-shadow;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 